<template>
  <div style="width: 60%; margin: 10px auto">
    <div style="margin: 20px; font-size: 24px; font-weight: bold; text-align: center">{{ data.article.title }}</div>
    <div style="text-align: center;color: #666;align-items: center;justify-content: center;display: flex">
      <sapn style="margin:  0 20px"><el-icon size="16" style="top: 2px"><Calendar/></el-icon> {{ data.article.date}}</sapn>
      <sapn style="margin:  0 20px"><el-icon size="16" style="top: 2px"><View/></el-icon> {{ data.article.readCount }}</sapn>
      <div style="color: orange;font-weight: bold;display: flex;align-items: center;grid-gap: 10px">
        <span style="font-size: 20px">{{data.article.collectCount}}</span>
        <el-button @click="collect()" size="mini" style="background-color: orange;padding: 5px 10px;color: white;border-color: orange">
          收藏
        </el-button>
      </div>
    </div>
    <div style="padding: 20px;" class="content">
      <div v-html="data.article.content"></div>
    </div>
    <div>
      <Comment :module="'article'"></Comment>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import router from "@/router/index.js";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";


const collect = () => {
  request.post('/collect/add', { fid: data.id }).then(res => {
    if (res.code === '200') {
      ElMessage.success( '收藏成功')
      load() // 重新获取当前的攻略信息
    } else {
      ElMessage.error(res.msg)
    }
  })}

const load = () => {
  request.get('/article/selectById/' + data.id).then(res => {
    data.article = res.data
  })}
const data = reactive({
  id: router.currentRoute.value.query.id,
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  article: {}
})

load()
request.get('/article/selectById/' + data.id).then(res => {
  data.article=res.data
})

</script>

<style scoped>

</style>
